<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
    <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 客户管理</el-breadcrumb-item>
  </el-breadcrumb>

  <el-divider></el-divider>
  <span>查询信息:</span>
  <el-input v-model="input" placeholder="请输入用户名/phone/orderId" style="width: 300px"></el-input>
  <el-button size="mini" type="primary" style="margin-left: 30px"@click ="search()">
    查看
  </el-button>
  <el-button size="mini" type="primary" style="margin-left: 40px" @click="exportExcelSelect()">
    导出EXCEL
  </el-button>
  <el-divider></el-divider>
<!--数据表格-->
  <el-table :data="tableData" @selection-change="handleSelectionChange" border style="width: 100%" >
    <el-table-column type="selection">
    </el-table-column>
    <el-table-column  prop="id" label="ID" align="center" width="80"></el-table-column>
    <el-table-column  prop="username" label="客户姓名" align="center" width="120"></el-table-column>
    <el-table-column  prop="phone" label="联系电话" align="center" width="120"></el-table-column>
    <el-table-column  prop="orderId" label="订单ID" align="center" width="120"></el-table-column>
    <el-table-column  prop="startTime" label="入住日期" align="center" width="180"></el-table-column>
    <el-table-column  prop="endTime" label="离店日期" align="center" width="180"></el-table-column>
    <el-table-column  prop="categoryName" label="房型" align="center" width="120"></el-table-column>
    <el-table-column  prop="orderState" label="订单状态" align="center" width="120"></el-table-column>
  </el-table>
  <div style="margin-top: 10px">
    <el-pagination
                   layout="total,prev, pager, next"
                   @current-change="changePage"
                   :total="total"
                   :pageSize="pageSize"
                   :current_Page="currentPage"
                   hidden-on-single-page
    >
    </el-pagination>
  </div>
<!--预览弹窗表格-->
  <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
    <el-table :data="selectData" id="selectTable" height="380px">
      <el-table-column  prop="id" label="ID" align="center" width="80"></el-table-column>
      <el-table-column  prop="username" label="客户姓名" align="center" width="120"></el-table-column>
      <el-table-column  prop="phone" label="联系电话" align="center" width="120"></el-table-column>
      <el-table-column  prop="orderId" label="订单ID" align="center" width="120"></el-table-column>
      <el-table-column  prop="startTime" label="入住日期" align="center" width="180"></el-table-column>
      <el-table-column  prop="endTime" label="离店日期" align="center" width="180"></el-table-column>
      <el-table-column  prop="categoryName" label="房型" align="center" width="120"></el-table-column>
      <el-table-column  prop="orderState" label="订单状态" align="center" width="120"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="exportExcel">确定保存</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "customer",
  data(){
    return{
      input:"",
      tableData:[],
      //表格中选择的数据
      selectData:[],
      selectWindow:false,
      total:0,
      pageSize:0,
      currentPage:0,
    }
  },
  methods:{
   search(){
     if (this.input!==null){
       let url = 'http://localhost:9999/table/customerTable';
       console.log("发送请求")
       this.axios.get(url,   {params:{ any: this.input}})
           .then((response)=>{
         if (response.data.state ==20000){
           this.tableData=response.data.data;
           if (this.tableData.length>1){
             this.$message.success('操作成功!!!');
           }
         }else if (response.data.state==40400){
           this.$message.error(response.data.message);
         }else{
           console.log('其他状态码的处理');
           // 可以添加对其他状态码的处理逻辑
         }
           }).catch((error) => {
         // 请求失败或返回非2xx和404状态码的处理
         this.$message.error('请求失败');
         console.log('请求错误:', error);
       });
     }
   },
    //格式化数据
    getExcel(dom,title ='默认标题',){
     var excelTitle = title;
     var wb = XLSX.utils.table_to_book(document.querySelector(dom));
     //获取二进制字符串作为输出
      var wbot = XLSX.write(wb,{bookType:"xlsx",bookSST:true,type:"array"});
      try {
        FileSaver.saveAs(
            new Blob([wbot],{type:"application/octet-stream"}),
            excelTitle + ".xlsx"
        );
      }catch (e){
        if (typeof console !== "undefined") console.log(e,wbot);
      }
      return wbot;
    },
    //导出
    exportExcel(){
     this.getExcel('#selectTable','用户报表')
    },
    //显示预览弹窗
    exportExcelSelect(){
     if (this.selectData.length<1){
       this.$message.error('请选择要导出的内容!');
       return false;
     }
      this.selectWindow=true;
    },
    //选中数据
    handleSelectionChange(val){
      this.selectData = val;
    },
    //切换分页
    changePage(page){
     this.$router.replace('?page='+page);
     this.loadCategoryList();
    },
    loadCategoryList(){
      let page = this.$router.currentRoute.query.page;
      if (!page){
        page=1;
      }
     let url ='http://localhost:9999/table/customerTableb?page='+page;
     console.log('url'+url);
      this.axios.get(url).then((response)=>{
        this.tableData=response.data.data.list;
        this.total=response.data.data.total;
        this.pageSize=response.data.data.pageSize;
        this.currentPage=response.data.data.currentPage;
      })
    }
  },
  created() {
     /* this.axios.get('http://localhost:9999/table/customerTablex').then((response)=>{
        this.tableData=response.data.data;
        /!*this.total=response.data.total;
        this.pageSize=response.data.pageSize;
        this.currentPage=response.data.currentPage;*!/
      })*/
    this.loadCategoryList();

  }

}
</script>

<style scoped>

</style>